<template>
  <div class="myselfContanier">
      <!-- 搜索框 -->
      <transition name="myAn">
        <yl-search class="ylsearch" v-if="!showMenu"  :submit="search" :ylstyle=" searchStyle" style="position:fixed;z-index:100;width:100%"></yl-search>
      </transition>
      <baidu-map class="map" :theme="theme"  @ready="mapReady">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
           <!-- 自己头像 -->
          <self-overflow :position='{lng:myPoints.gpsposition.lng,lat:myPoints.gpsposition.lat}'>
          </self-overflow>
             <!-- 遮盖物 -->
        <div v-for="(poi,num) of points" :key="num" class="mySample">
            <my-overflow
            :position='{lng:poi.gpsposition.lng,lat:poi.gpsposition.lat}'
            :text="poi.latestTime"
            :type="poi.type"
            :index='num'
            :count='poi.count'
            :color="poi.color"
            :soundShow="poi.soundShow"
            :photo="poi.photo"
            @changeColor="resiveIndex"
            :zoom="zoom">
            </my-overflow>
        </div>
    <bm-circle :center="points[1].gpsposition" :radius="10000" stroke-color="red" :stroke-opacity="0" :stroke-weight="1" :strokeOpacity="0.5"  :editing="false"></bm-circle>
      </baidu-map>
      <!-- 上方弹起框 -->
      <transition name="fade">
          <div class="model" v-show="modelShow">
              <div class="speak">
                  <yd-icon v-show="labaShow"  name="sound" class="laba"  custom slot="icon" size=".45rem" color='#bcfc6a'></yd-icon>
                  <ul :style="{position:'absolute',left:'.9rem',top:'.36rem'}"  >
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'0 .08rem',width:'.06rem',height:'.25rem'}"></li>
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'.05rem .08rem 0',width:'.06rem',height:'.2rem'}" v-for="(n,index) in 6" :key="index"></li>
                  </ul>
                  <img :src="points[modelNum].photo" >
                  <p> - - {{points[modelNum].name}} - - </p>
              </div>
          </div>
      </transition>
      <!-- 下方对讲功能 -->
      <div class="btmSpeak">
          <ul>
              <li @click="uList">
                  <yd-icon name="information"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li @touchstart="speakStart($event)" @touchend="speakEnd($event)">
                  <yd-icon name="speak"  custom slot="icon" size=".78rem" :color='speakColor' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li @click="msg">
                  <yd-icon name="write"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
          </ul>
      </div>
      <!-- 左侧列表 -->
      <transition name="fade">
      <div class="btn"  v-show="showMenu" @click="showMenu=false">
          <yd-icon name="drop"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon>
      </div>
      </transition>
      <transition name="fade">
        <ul class="menu" v-show="!showMenu" >
            <li v-for="(menu,index) of menuDetail" :key="index">
                <yd-icon :name="menu.name"  custom slot="icon" size=".4rem" color='#ffffff'></yd-icon>
            </li>
            <li @click="showMenu=true" style="margin-top:1px"><yd-icon name="up"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon> </li>
        </ul>
      </transition>
  </div>
</template>
<script>
import myOverflow from '@/components/map/myOverflow'
import selfOverflow from '@/components/map/selfOverflow'
import ylSearch from '@/components/search'
import bus from '@/common/js/base/eventBus.js'
export default {
  components:{myOverflow,ylSearch,selfOverflow},
  data(){
      return{
        page:'2',
           theme:[//地图主题
            {
            "featureType": "all",
            "elementType": "all",
            "stylers": {"weight": "0.8","lightness": 38,"saturation": -44}
            }
        ],
        searchStyle:{
                height:'1',//高度，必须
                bgcolor:'#FFB36E',//背景，可选
                remind:'搜索想找的人',//placeholder可选
                close:false, //开关 可选
            },
        clickIndex:1,//当前点击下标
        showMenu:true,
        modelShow:false,
        modelNum:1,
        labaShow:true,
        zoom:'',
        speakColor:'#EF8356',
        myPoints:{'gpsposition':{'lng':"104.989931",'lat':'30.686158'}},
        points:[
            {"name":"张大爷","type":"media","color":"#595f6f","latestTime":"7.17","soundShow":false,"count":"1","photo":require("./img/1.jpg"),'gpsposition':{'lng':"104.204022",'lat':'30.568816'}},
            {"name":"王大爷","type":"text","color":"#595f6f","latestTime":"11.21","soundShow":false,"count":"5","photo":require("./img/2.jpg"),'gpsposition':{'lng':"104.354074",'lat':'30.69858'}},
            {"name":"李大爷","type":"media","color":"#595f6f","latestTime":"8.30","soundShow":false,"count":"22","photo":require("./img/3.jpg"),'gpsposition':{'lng':"104.089038",'lat':'30.613085'}},
            {"name":"你大爷","type":"text","color":"#595f6f","latestTime":"14.55","soundShow":false,"count":"0","photo":require("./img/4.jpg"),'gpsposition':{'lng':"103.959682",'lat':'30.572299'}},
        ],
        menuDetail:[//下拉菜单
            {"name":"friends"},
            {"name":"poisition"},
            {"name":"gai"},
            {"name":"car"},
            {"name":"doctor"},
            {"name":"house"},
        ]
      }
  },
  watch:{
   msg(newVal,oldVal){
       console.log(this.msg)
   },
  },
  methods:{
      search(){//搜索
          console.log("开始搜索啦")
      },
      speakStart(e){//开始录音
            e.currentTarget.style.backgroundColor="#EF8356"
            this.speakColor="#ffffff"
      },
      speakEnd(e){
            e.currentTarget.style.backgroundColor="transparent"
             this.speakColor="#EF8356"
      },
    resiveIndex(data){//接收子组件参数，进行相应操作
          let myColor=this.points;//保存用户数据
          for(let i=0;i<myColor.length;i++){
              if(i!=data){
                  myColor[i].color="#595f6f";
                  myColor[i].soundShow=false;
              }
          }
          myColor[data].color="#595f6f";//更改图标字体颜色
              myColor[data].soundShow=!myColor[data].soundShow;
            if(myColor[data].soundShow){
               myColor[data].color="#f47d43";
            }
            this.modelShow=myColor[data].soundShow;
            this.modelNum=data
      },
    uList(){//跳转附近的人
        this.$router.push({name:'uList'})
    },
    msg(){//用户消息
      this.$router.push({name:'latestMsg'})
    },
    mapReady({BMap, map}){//地图原生事件
            let that=this;  //保存this指向
            let mapPoints=that.points.slice(0);
            mapPoints.unshift(that.myPoints);
            function setZoom(points){//根据坐标计算地图级别
              if(points.length>0){
                var maxLng = points[0].gpsposition.lng;
                var minLng = points[0].gpsposition.lng;
                var maxLat = points[0].gpsposition.lat;
                var minLat = points[0].gpsposition.lat;
                for (var i = points.length - 1; i >= 0; i--) {
                  var res = points[i].gpsposition;
                  if(res.lng > maxLng) maxLng =res.lng;
                  if(res.lng < minLng) minLng =res.lng;
                  if(res.lat > maxLat) maxLat =res.lat;
                  if(res.lat < minLat) minLat =res.lat;
                };
                var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
                var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
                var zoom = getZoom(maxLng, minLng, maxLat, minLat);
                map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);
              }else{
                //没有坐标，显示全中国
                map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
            }
        };
         function getZoom (maxLng, minLng, maxLat, minLat) {
                var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
                var pointA = new BMap.Point(maxLng,maxLat);  // 创建点坐标A
                var pointB = new BMap.Point(minLng,minLat);  // 创建点坐标B
                var distance = map.getDistance(pointA,pointB).toFixed(1);  //获取两点距离,保留小数点后两位
                for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
                    if(zoom[i] - distance > 0){
                        return 17-i+3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                };
            }
             //   设置地图初始位置
            setZoom(mapPoints)
            window.mytimer= setInterval(()=>{
                  that.zoom=map.getZoom()
            })
      },
  },
  mounted(){
      setInterval(()=>{
        for(var i=0,j=this.points;i<j.length;i++){
          if(j[i].count>99){
              j[i].count=99
          }
        }
      },1000)

  },
  activated(){
    bus.$emit('mapPage',this.page);
  },
  deactivated(){
      clearInterval(window.mytimer)
  }
}
</script>
<style lang="less" scoped>
@import "~less/base";
    .myselfContanier{
         position: absolute;
         top: .97rem;
         bottom: 0;
         width: 100%;
         img{
             max-width: 100%;
             max-height: 100%;
         }
        .map{//地图容器
            width: 100%;
            height: 100%;
        }
        .ylsearch{
            position: fixed;
            top: 0;
            z-index: 100
        }
        .model{//用户发语音模态框
            position: absolute;
            width: 3.5rem;
            height:4rem;
            background-color:@model-color;
            top: .5rem;
            left: 50%;
            margin-left: -3.5/2rem;
            border-radius: 10px;
            .laba{//喇叭
                position: absolute;
                top: .25rem;
                left: .25rem;
            }
            img{//用户头像
                position: absolute;
                width: 1.4rem;
                border-radius: 50%;
                top: .8rem;
                left: 50%;
                // margin-top: -.7rem;
                margin-left: -.7rem;
                border: .04rem solid @color-border4;
            }
            p{
                text-align: center;
                color: @color-c;
                font-size: 16px;
                margin-top: 2.4rem;
            }
        }
        .btmSpeak{//下方对讲按钮
            height: 2.5rem;
            width: 100%;
            position: absolute;
            bottom: 0;
            ul{//3个功能按钮
                li{
                    float: left;
                }
                >:nth-child(1),>:nth-child(3){
                    width: 1rem;
                    height: 1rem;
                    position: absolute;
                    top: 50%;
                    margin-top: -.5rem;
                    background-color: @color-btn1;
                    border-radius: 50%;
                    i{
                       top: 50%;
                       left: 50%;
                       margin-top: -.2rem;
                       margin-left: -.2rem;
                    }
                }
                >:nth-child(1){
                    left: 18%;
                }
                >:nth-child(3){
                    right: 18%;
                }
                >:nth-child(2){
                    width: 1.85rem;
                    height: 1.85rem;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: -1.85/2rem;
                    margin-left: -1.85/2rem;
                    background-color: @color-btnBack1;
                    border-radius: 50%;
                    border: .04rem solid @color-border5;
                     i{
                       top: 50%;
                       left: 50%;
                       margin-top: -.4rem;
                       margin-left: -.4rem;
                    }
                }
            }
        }
        .btn{//展开按钮
            position: absolute;
            top: .2rem;
            right: .1rem;
            background-color: @background-a;
            opacity: .5;
            width: .9rem;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
        }
        .menu{//展开菜单
            position: absolute;
            top: .2rem;
            right: .1rem;
            /*opacity: .5;*/
            li{
                background-color:@background-a;
                width: .9rem;
                height: .9rem;
                text-align: center;
                line-height: .9rem;
            }
        }
        .fade-enter-active, .fade-leave-active {
            transition: all 1s
        }
        .fade-enter, .fade-leave-to  {
            // height: 50%;
            opacity: 0;
        }
                .myAn-enter-active{//自定义动画

            animation: bounce-in .5s;
        }
        .myAn-leave-active{

            animation: bounce-in .5s reverse;
        }
        .myAn-enter,.myAn-leave-to{
            @keyframes bounce-in {
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.2);
                }
                100% {
                    transform: scale(1);
                }
            }
        }
    }
</style>
